<template>
	<view class="mappage">
		<view class="section">
			<input type="text" placeholder="搜索" focus="true" v-model="keywords" @input="bindInput"/>
		</view>
		<scroll-view :scroll-y="true" class="addcont" style="height: 500rpx;">
			<view class="result" v-for="(item,index) in tips" :key="item" @touchstart="bindSearchList(item.name)">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="mapcontainer">
			<view class="title">显示当前的位置:</view>
			<map id="map" scale="16" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
		</view>
	</view>
</template>

<script>
	import amapFile from '../../utils/amap-wx.130.js'
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				tips:[],
				latitude:0,
				longitude:0,
				markers:[],
				keywords:""
			}
		},
		mounted() {
			this.getMapaddress()
		},
		methods: {
			...mapMutations(['updataCity']),
			//获取地图信息
			getMapaddress(){
				let that = this
				var myAmapFun = new amapFile.AMapWX({key:'c72cc261b9301c90270019d99321ad1e'});
				myAmapFun.getRegeo({
					iconPath:"/static/map/mapiconred.png",
					width:22,
					height:28,
					success:function(data){
						console.log(data,"---")
						let markers  = [{
							id:data[0].id,
							latitude:data[0].latitude,
							longitude:data[0].longitude
						}]
						that.latitude = data[0].latitude
						that.longitude = data[0].longitude
						that.markers = markers
					},
					fail:function(err){
						//回调失败
						console.log(err)
					}
				})
			},
			//input实时绑定value调用高德api
			bindInput(e){
				console.log(e)
				let that = this
				let keywords = that.keywords
				var myAmapFun = new amapFile.AMapWX({key:'c72cc261b9301c90270019d99321ad1e'});
				myAmapFun.getInputtips({
					keywords:keywords,
					location:"",
					success:function(res){
						console.log(res);
						if(res && res.tips){
							that.tips = res.tips
						}
					}
				})
			},
			bindSearchList(cityName){
				this.updataCity({cityName:cityName})
				wx.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
.mappage{
	height: 100%;
	background-color: #eee;
	.section{
		width: 100%;
		height: 30px;
		input{
			width: 90%;
			margin: 0 auto;
			border: 1px solid #c3c3c3;
			height: 30px;
			border-radius: 10rpx;
			padding: 0 5px;
		}
	}
	.result{
		width: 40%;
		padding: 20rpx 0 20rpx 30rpx;
	}
	.mapcontainer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			padding: 20rpx;
		}
		#map{
			width: 100%;
			height: 500rpx;
		}
	}
}
</style>
